<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东商城</title>
    <link rel="stylesheet" href="./lib/css/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/swiper2.css" />
    <link rel="stylesheet" href="./css/index.css">
    <script src="./lib/js/bootstrap.bundle.js"></script>
    <script src="http://at.alicdn.com/t/c/font_4000250_pbgp7djttj.js"></script>
    <script src="./lib/axios.js"></script>
</head>

<body>
    <!-- 第一部分 header -->
    <div class="header">
        <div class="headerC">
            <div class="headerTop">
                <img src="./images/nav02-header.png" alt="">
            </div>
        </div>
    </div>

    <!-- 第二部分 nav -->
    <div class="nav">
        <div class="navC">
            <div class="left">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon--"></use>
                </svg>
                <span>河南</span>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#">我的</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">我的京东</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">商家服务</a></li>
                    <li><a href="#">网站导航</a></li>
                    <li><a href="#">手机京东</a></li>
                    <li><a href="#">网站无障碍</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 第三部分 search -->
    <div class="search">
        <div class="searchC">
            <div><img width="250px" height="150px" src="./images/nav01-jingdong.png" alt=""></div>
            <div>
                <div class="input-group mb-3">
                    <input id="input1" type="text" class="form-control" placeholder="京东起飞了"
                        aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <span style="background-color: pink;" class="input-group-text" id="basic-addon2">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fangdajing"></use>
                        </svg>
                    </span>
                </div>
                <ul id="ul"></ul>
                <ul id="ul1">
                    <li>新老房装修</li>
                    <li>荣耀商家</li>
                    <li>新季换新</li>
                    <li>美妆护肤</li>
                    <li>拍拍茅台</li>
                    <li>小米新品</li>
                    <li>冰箱</li>
                </ul>
                <ul id="ul2">
                    <li>京东超市</li>
                    <li>秒杀</li>
                    <li>便宜包邮</li>
                    <li>京东生鲜</li>
                    <li>进口好物</li>
                    <li>京东家电</li>
                    <li>PLUS会员</li>
                    <li>拍卖</li>
                </ul>
            </div>
            <div><img width="150px" src="./images/nav03-erweima.png" alt=""></div>
            <div class="gouwuche">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xianxinggouwuche"></use>
                </svg>
                <span>我的购物车</span>
            </div>
        </div>
    </div>

    <!-- 第四部分 info -->
    <div class="info">
        <div class="one">
            <ul id="ul3">
                <li>
                    <a href="#">家用电器</a>
                    <ul class="list">
                        <!--  <li>
                            <div>
                                <p>电视</p>
                            </div>
                            <ul>
                                <li>全面屏电视</li>
                            </ul>
                        </li> -->
                    </ul>
                </li>
                <li><a href="#">电脑</a>/<a href="#">办公</a></li>
                <li><a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a></li>
                <li><a href="#">男装</a>/<a href="#">女装</a>/<a href="#">童装</a>/<a href="#">内衣</a></li>
                <li><a href="#">美妆</a>/<a href="#">个护清洁</a>/<a href="#">宠物</a></li>
                <li><a href="#">女鞋</a>/<a href="#">箱包</a>/<a href="#">钟表</a>/<a href="#">珠宝</a></li>
                <li><a href="#">男鞋</a>/<a href="#">运动</a>/<a href="#">户外</a></li>
                <li><a href="#">房产</a>/<a href="#">汽车</a>/<a href="#">汽车用品</a></li>
                <li><a href="#">母婴</a>/<a href="#">玩具乐器</a></li>
                <li><a href="#">食品</a>/<a href="#">酒类</a>/<a href="#">旅游</a>/<a href="#">生活</a></li>
                <li><a href="#">艺术</a>/<a href="#">礼品鲜花</a>/<a href="#">农牧园艺</a></li>
                <li><a href="#">医药保健</a>/<a href="#">计生情趣</a></li>
                <li><a href="#">图书</a>/<a href="#">文娱</a>/<a href="#">教育</a>/<a href="#">电子书</a></li>
                <li><a href="#">机票</a>/<a href="#">酒店</a>/<a href="#">旅游</a>/<a href="#">生活</a></li>
                <li><a href="#">支付</a>/<a href="#">白条</a>/<a href="#">保险</a>/<a href="#">企业金融</a></li>
                <li><a href="#">安装</a>/<a href="#">维修</a>/<a href="#">清洗</a>/<a href="#">二手</a></li>
                <li><a href="#">工业品</a>/<a href="#">元器件</a></li>
            </ul>
        </div>
        <div class="two">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/1.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/2.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/3.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/4.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/5.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/6.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/7.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/8.png" />
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="three">
            <div>
                <div class="infoRightOne">
                    <img src="./images/info02.png" alt="">
                    <div>
                        <p>Hi~ 欢迎逛京东！</p>
                        <span>登录</span>|<span>注册</span>
                    </div>
                    <!-- <img src="./images/info02.png" alt="">
                    <div>
                        <p>Hi~ 欢迎逛京东！</p>
                        <span>退出</span>
                    </div> -->
                </div>
                <div class="plus">
                    <p>新人福利</p>
                    <p>PLUS会员</p>
                </div>
                <!-- <div class="plus">
                    <p style="width:100%; background-color: #fff; color: red; box-shadow: 0px 0px 3px 2px #cecece;">
                        开通PLUS 平均省1210元/年
                    </p>
                </div> -->
            </div>
            <div>
                <p>京东快报</p>
            </div>
            <div>
                <ul>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-chengshi"></use>
                        </svg>
                        <span>企业购</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-chushoulipinka"></use>
                        </svg>
                        <span>礼品卡</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-pre_icon_huafeiliuliangchongzhi"></use>
                        </svg>
                        <span>话费</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-baitiaoshanfu"></use>
                        </svg>
                        <span>白条</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-youxiyouxiji"></use>
                        </svg>
                        <span>游戏</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jiayouka"></use>
                        </svg>
                        <span>加油卡</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-feiji"></use>
                        </svg>
                        <span>机票</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shangyun"></use>
                        </svg>
                        <span>云建站</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wujin"></use>
                        </svg>
                        <span>五金站</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jiudian"></use>
                        </svg>
                        <span>酒店</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-huochepiao"></use>
                        </svg>
                        <span>火车票</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-dianyingpiaoiocn"></use>
                        </svg>
                        <span>电影票</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 第五部分 secondsKill -->
    <div class="secondsKill">
        <div class="left">
            <h2>京东秒杀</h2>
            <p>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shandian"></use>
                </svg>
            </p>
            <p>
                <span>10:00</span>点场 距结束
            </p>
            <ul class="kill">
                <li>00</li>:
                <li>00</li>:
                <li>00</li>
            </ul>
        </div>
        <div class="middle">
            <div class="swiper mySwiper1">
                <div class="middleLun swiper-wrapper">
                    <!--  <div class="swiper-slide swiper1">
                        <img src="./images/4.png" alt="">
                        <p>11111111111111111111111111111111111111</p>
                        <p>￥123.00</p>
                    </div>
                    -->
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <!-- <div class="swiper-pagination"></div> -->
            </div>
        </div>
    </div>

    <!-- 第六部分 goods -->
    <div class="goods">
        <h1>~.~京东好物~.~</h1>
        <div class="searchGoods">
            <div class="filter">
                <form name="form1">
                    <select class="form-select" name="select1" aria-label="Default select example">
                        <option value="">filter</option>
                        <option value="hot">hot</option>
                        <option value="sale">sale</option>
                    </select>
                </form>
            </div>
            <div class="saleType">
                <form name="form2">
                    <select class="form-select" name="select2" aria-label="Default select example">
                        <option value="10">saleType</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                </form>
            </div>
            <div class="category">
                <form name="form3">
                    <select class="form-select" name="select3">
                        <option value="">category</option>
                        <option value="内衣配饰">内衣配饰</option>
                        <option value="家装建材">家装建材</option>
                        <option value="居家生活">居家生活</option>
                        <option value="奶粉尿裤">奶粉尿裤</option>
                        <option value="电脑办公">电脑办公</option>
                        <option value="食品酒水">食品酒水</option>
                        <option value="邮币乐器">邮币乐器</option>
                        <option value="童装玩具">童装玩具</option>
                        <option value="皮具箱包">皮具箱包</option>
                        <option value="珠宝首饰">珠宝首饰</option>
                        <option value="生活电器">生活电器</option>
                        <option value="个护健康">个护健康</option>
                        <option value="手机相机">手机相机</option>
                        <option value="厨房电器">厨房电器</option>
                        <option value="厨卫电器">厨卫电器</option>
                        <option value="烹饪厨具">烹饪厨具</option>
                        <option value="汽车生活">汽车生活</option>
                        <option value="海外购">海外购</option>
                        <option value="大家电">大家电</option>
                        <option value="女装">女装</option>
                        <option value="女鞋">女鞋</option>
                        <option value="男装">男装</option>
                        <option value="男鞋">男鞋</option>
                        <option value="其他">其他</option>
                    </select>
                </form>
            </div>
            <div class="search">
                <form name="form4">
                    <input class="form-control" name="select4" type="text" placeholder="search">
                </form>
            </div>
            <div class="searchBtn">
                <div class="btn btn-outline-dark">
                    click
                </div>
            </div>
        </div>
        <ul class=" cartGoods">
            <!-- <li>
                <img src="./images/3.png" alt="">
                <p>1111111111111111111111111111111111111111111111111111111111111</p>
                <p>￥148.00</p>
            </li> -->
        </ul>
    </div>

    <script src="./lib/swiper2.js"></script>
    <script>
        /* 第三部分 search */
        // 搜索框，模糊查询
        let input1 = document.querySelector('#input1');
        let list = document.querySelector('#ul');
        input1.oninput = function (evt) {
            ul.style.display = 'block'
            if (!evt.target.value) {
                return;
            }
            var oScript = document.createElement("script");
            oScript.src = `https://suggest.taobao.com/sug?k=1&area=c2c&q=${evt.target.value}&code=utf-8&ts=1680769426499&callback=test`;
            document.body.appendChild(oScript);
            oScript.onload = function () {
                oScript.remove();
            }
        }
        input1.onfocus = () => {
            ul.style.display = 'block';
        }
        input1.onblur = () => {
            ul.style.display = 'none';
        }

        function test(obj) {
            if (obj.result.length != 0) {
                list.innerHTML = obj.result.map(item => `<li>${item[0]}</li>`).join('');
            } else {
                list.innerHTML = `<li>对不起~.~</li><li>这里什么也没有</li>`;
            }
        }

        /* 可变数组 */
        let arr1 = ['男装上新日', '新老房装修', '科索沃新品'];
        let ul1Li = document.querySelectorAll('#ul1>li');
        let count = 0;
        ul1Li[0].style.color = 'red';
        setInterval(function () {
            if (count > arr1.length - 1) {
                count = 0;
            }
            ul1Li[0].innerText = arr1[count++];
        }, 2000);

        // 购物车
        let cart = document.querySelector('.gouwuche>span');
        cart.onclick = function () {
            if (!localStorage.getItem('flag')) {
                alert('请先登录，宝 ~.~');
                open('02-login.html');
                return;
            }
            open('03-cart.html');
            return false;
        }


        /* 第四部分 info  */
        // jsonp 
        let aItems = document.querySelectorAll('#ul3>li>a');
        let lists = document.querySelector('.list');
        let info = document.querySelector('.info');
        let aItem = null;
        for (let i = 0; i < aItems.length; i++) {
            aItems[i].onmousedown = function () {
                lists.style.display = 'block';

                for (let j = 0; j < aItems.length; j++) {
                    if (aItems[j].style.color != '') {
                        aItems[j].style.color = '';
                        break;
                    }
                }

                aItem = this;
                this.style.color = 'red';

                var oScript = document.createElement("script");
                oScript.src = `https://suggest.taobao.com/sug?k=1&area=c2c&q=${aItems[i].innerText}&code=utf-8&ts=1680769426499&callback=test1`;
                document.body.appendChild(oScript);

                oScript.onload = function () {
                    oScript.remove();
                }

                info.onmouseleave = function () {
                    lists.style.display = 'none'
                    aItem.style.color = '';
                }
            }

        }

        // jsonp最后函数
        function test1(obj) {
            let list = document.querySelector('.list');
            let magic = obj['magic'];
            let html = '';
            if (magic) {
                magic.forEach(item => {
                    item.data.forEach(item => {
                        item.forEach(item => {
                            html += `<li>${item.title}</li>`;
                        })
                    })
                })
            } else { html = `<li>没有找到您想要的宝贝~.~</li>`; }

            let result = obj.result;
            if (Object.keys(result).length != 0) {
                lists.innerHTML = result.map((item) =>
                    `<li>
                    <div>
                        <p>${item[0]}</p>
                        <img width='20px' src='./images/info01.png'>
                    </div>
                    <ul>
                        ${html}
                    </ul>
                    </li>`).join('');
            } else {
                lists.innerHTML = `<li><p>对不起，~.~</p><p>这里什么也没有</p></li>`;
            }
        }

        // 轮播
        var swiper = new Swiper(".mySwiper", {
            autoplay: {
                delay: 2000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            spaceBetween: 30,
            effect: "fade",
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });

        // 登录注册 
        let infoRightOne = document.querySelector('.infoRightOne');
        let plus = document.querySelector('.plus');
        if (!localStorage.getItem('flag')) {
            let spans = document.querySelectorAll('.infoRightOne>div>span');
            spans[0].onclick = function () {
                location.href = '02-login.html';
            }
            spans[1].onclick = function () {
                location.href = '01-register.html';
            }
        } else {
            let html1 = infoRightOne.innerHTML;
            let html2 = plus.innerHTML;
            infoRightOne.innerHTML = `
                    <img src="./images/info02.png" alt="">
                    <div>
                        <p style="padding-bottom:7px;">Hi~ 欢迎逛京东！</p>
                        <span class='tuiChu'>退出</span>
                    </div>`;
            plus.innerHTML = ` 
                    <p style="width:100%; background-color: #fff; color: red; box-shadow: 0px 0px 3px 2px #cecece;">
                        开通PLUS 平均省1210元/年
                    </p>`;

            let tuiChu = document.querySelector('.tuiChu');
            tuiChu.onclick = () => {
                localStorage.removeItem('flag');
                infoRightOne.innerHTML = html1;
                plus.innerHTML = html2;
                let spans = document.querySelectorAll('.infoRightOne>div>span');
                spans[0].onclick = function () {
                    location.href = '02-login.html';
                }
                spans[1].onclick = function () {
                    location.href = '01-register.html';
                }
            }
        }

        /* 第五部分 secondsKill */
        // 秒杀
        let kills = document.querySelectorAll('.kill>li');
        let targetTime = new Date('2023/5/30 22:00:00');

        function diffTime(targetT) {
            let currentT = new Date();
            let sub = Math.ceil((targetT - currentT) / 1000);
            let hours = parseInt(sub / 60 / 60) % 24;
            let minutes = parseInt(sub / 60) % 60;
            let seconds = sub % 60;
            return { hours, minutes, seconds };
        }

        setInterval(() => {
            let res = diffTime(targetTime);
            res.hours < 10 ? kills[0].innerHTML = '0' + res.hours : kills[0].innerHTML = res.hours;
            res.minutes < 10 ? kills[1].innerHTML = '0' + res.minutes : kills[1].innerHTML = res.minutes;
            res.seconds < 10 ? kills[2].innerHTML = '0' + res.seconds : kills[2].innerHTML = res.seconds;

        }, 1000);

        // 轮播
        let middleLun = document.querySelector('.middleLun');
        // middleLun.innerHTML =
        axios('/goods/list', {
            baseURL: 'http://localhost:8888',
            params: {
                current: 3,
                pagesize: 25
            }
        }).then(res => {
            res = res.data.list;
            middleLun.innerHTML = res.map(item => `<div class="swiper-slide swiper1">
                        <img src="${item['img_big_logo']}" alt="">
                        <p>${item.title}</p>
                        <p>￥${item.price}</p>
                    </div>`).join('');

            // 需要放在这里，等待渲染完成
            var swiper = new Swiper(".mySwiper1", {
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
                // 一次几个
                slidesPerView: 5,
                // 项目之间距离
                spaceBetween: 10,
                // 一次划过几个
                slidesPerGroup: 5,
                loop: true,
                loopFillGroupWithBlank: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        })

        /* 第六部分 goods */
        // 商品列表的渲染
        let searchBtn = document.querySelector('.searchBtn>.btn');
        let cartGoods = document.querySelector('.cartGoods');
        axios('/goods/list', {
            headers: {
                "authorization": localStorage.getItem("token"),
            },
            baseURL: 'http://localhost:8888',
            params: {
                // current: 1,    // 当前页数据，默认1
                pagesize: 1000,    // 一页多少数据，默认12
                search: '',  // 模糊搜索关键字
                // filter: 'hot', // hot,sale 筛选
                // category: '', // 分类筛选，
                saleType: 10,      // 5~10 折扣类型，默认10
                sortType: 'price'
            }
        }).then(res => {
            res = res.data.list;
            // console.log(res);
            cartGoods.innerHTML = res.map(item => `
            <li>
                <img src="${item['img_big_logo']}" alt=""> 
                <p>自营</p>
                <p>${item.title}</p>
                <p>￥${item['current_price']}</p>   
                <div class="zheZhao"></div>
                <p class="goodsDetail" data-id="${item['goods_id']}"  data-category="${item['category']}">查看详情</p>
            </li>`).join('');

            let goodsDetail = document.querySelectorAll('.goodsDetail');
            for (const item of goodsDetail) {
                item.onclick = () => {
                    // console.log(item);
                    localStorage.setItem('gid', item.getAttribute('data-id'));
                    localStorage.setItem('category', item.getAttribute('data-category'));
                    open('04-detail.html', '_blank');
                }
            }
        });

        searchBtn.onclick = () => {
            let params = {
                filter: document.form1.select1.value,
                saleType: document.form2.select2.value,
                category: document.form3.select3.value,
                search: document.form4.select4.value,
            }
            // console.log("search: ", params);
            axiosGet(params).then(res => {
                res = res.data.list;
                console.log(res);
                if (res.length !== 0) {
                    cartGoods.innerHTML = res.map(item => `
                    <li>
                        <img src="${item['img_big_logo']}" alt=""> 
                        <p>自营</p>
                        <p>${item.title}</p>
                        <p>￥${item['current_price']}</p>
                        <div class="zheZhao"></div> 
                        <p class="goodsDetail" data-id="${item['goods_id']}" data-category="${item['category']}" > 查看详情</p > 
                    </li > `).join('');

                    let goodsDetail = document.querySelectorAll('.goodsDetail');
                    for (const item of goodsDetail) {
                        item.onclick = () => {
                            // 存 商品id，商品类型，商品详情页进行提取，交互渲染
                            localStorage.setItem('gid', item.getAttribute('data-id'));
                            localStorage.setItem('category', item.getAttribute('data-category'));
                            open('04-detail.html', '_blank');
                        }
                    }
                } else {
                    cartGoods.innerHTML = `<li li > <h1 class="noGoods">没有此类商品</h1></li >`;
                }
            }) // axiosGet
        } // searchBtn

        // 传入参数对象
        function axiosGet(data) {
            let params = {
                // current: 1, 
                pagesize: 1000,
                search: '',
                filter: '',
                category: '',
                saleType: 10,
                sortType: 'price',
                ...data,
            }
            // console.log('search: ', params);
            return axios('/goods/list', {
                headers: {
                    "authorization": localStorage.getItem("token"),
                },
                baseURL: 'http://localhost:8888',
                params,
            });
        } // axiosGet

    </script>
</body>

</html>